<template>
    <div v-show="!isMin" class="window" :style="{ zIndex: zIndex }" @mousedown="goTop">
        <div class="background" @mousedown="resizing"></div>
        <div class="header" @mousedown="dragging">
            <div class="icon">
                <img :src="window.icon" alt="图标" />
            </div>
            <div class="title" v-text="window.title"></div>
            <div class="controller">
                <div class="controller-btn" title="最小化" @click="min">
                    <i class="iconfont icon-zuixiaohua"></i>
                </div>
                <div v-if="isMax" class="controller-btn" title="还原" @click="max">
                    <i class="iconfont icon-zuidahua1"></i>
                </div>
                <div v-else class="controller-btn" title="最大化" @click="max">
                    <i class="iconfont icon-zuidahua"></i>
                </div>
                <div class="controller-btn" title="关闭" @click="close">
                    <i class="iconfont icon-guanbi"></i>
                </div>
            </div>
        </div>
        <div :id="'body-' + window.id" class="body">
            <!-- 判断本地应用 -->
            <add-app v-if="window.url === 'add-app'" class="component"></add-app>
            <iframe v-else :id="'iframe-' + window.id" class="iframe" :src="window.url"></iframe>
            <!-- 该遮罩用于点击使得窗口置顶 -->
            <div v-show="!isTop || isDragging || isResizing" class="body-mask"></div>
            <!-- iframe加载中的遮罩 -->
            <div v-show="isIframeLoading" class="iframe-mask">
                <i class="iconfont icon-jiazaizhong"></i>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import AddApp from '@/components/AddApp.vue';
import { useWindowStore } from '@/store/window';
import { onMounted, reactive, toRefs, watch } from 'vue';

// 创建store对象
const windowStore = useWindowStore();

const props = defineProps({
    // 窗口对象
    window: {
        type: Object,
        default: null,
    },
});

const data = reactive({
    // 当前窗口的zIndex
    zIndex: windowStore.getZIndex(props.window.id),
    // 是否已经置顶
    isTop: windowStore.isTop(props.window.id),
    // 最大化前主体高度
    beforeMaxBodyHeight: `calc(80vh - 30px)`,
    // 最大化前主体宽度
    beforeMaxBodyWidth: `calc(80vw)`,
    // 主体高度
    bodyHeight: `calc(80vh - 30px)`,
    // 主体宽度
    bodyWidth: `calc(80vw)`,
    // 是否最小化
    isMin: windowStore.isMin(props.window.id),
    // 是否最大化
    isMax: false,
    // 是否拖拽中
    isDragging: false,
    // 是否改变大小中
    isResizing: false,
    // iframe加载中
    isIframeLoading: false,
});
const { zIndex, isTop, isMin, isMax, isDragging, isResizing, isIframeLoading } = toRefs(data);

// 自定义事件
const emit = defineEmits(['reset-position']);

// 监听store中zIndexArray的改变
watch(
    windowStore.zIndexArray,
    () => {
        // 修改当前窗口的zIndex
        data.zIndex = windowStore.getZIndex(props.window.id);
        data.isTop = windowStore.isTop(props.window.id);
    },
    {
        deep: true,
    },
);

// 监听store中windowArray的改变
watch(
    windowStore.windowArray,
    () => {
        // 修改当前窗口的最小化状态
        data.isMin = windowStore.isMin(props.window.id);
    },
    {
        deep: true,
    },
);

// 鼠标按下，窗口置顶
const goTop = function () {
    windowStore.goTop(props.window.id);
};

// 鼠标按下头部，进入拖拽中状态
const dragging = function () {
    data.isDragging = true;
    // 鼠标松开事件
    parent['document'].addEventListener('mouseup', () => {
        data.isDragging = false;
    });
};

// 鼠标按下大小改变元素，进入大小改变中状态
const resizing = function () {
    data.isResizing = true;
    // 鼠标松开事件
    parent['document'].addEventListener('mouseup', () => {
        data.isResizing = false;
    });
};

// 最小化窗口
const min = function () {
    windowStore.min(props.window.id);
};

// 最大化窗口
const max = function () {
    const bodyElement = document.getElementById('body-' + props.window.id);
    if (bodyElement) {
        if (data.isMax) {
            data.isMax = false;
            bodyElement.style.height = data.beforeMaxBodyHeight;
            bodyElement.style.width = data.beforeMaxBodyWidth;
        } else {
            data.isMax = true;
            data.beforeMaxBodyHeight = bodyElement.style.height;
            data.beforeMaxBodyWidth = bodyElement.style.width;
            bodyElement.style.height = `calc(100vh - 30px - 40px)`;
            bodyElement.style.width = `calc(100vw)`;
        }
        // 发送重置定位事件
        emit('reset-position', props.window.id, data.isMax);
    }
};

// 关闭窗口
const close = function () {
    windowStore.remove(props.window.id);
};

// 挂载完毕
onMounted(() => {
    // 判断iframe是否加载完毕
    const iframe = document.getElementById('iframe-' + props.window.id);
    if (iframe) {
        data.isIframeLoading = true;
        iframe.onload = () => {
            data.isIframeLoading = false;
        };
    }
});
</script>

<style scoped lang="less">
.window {
    box-shadow: 0 0 5px @dps-color-gray-70;
    position: relative;

    .background {
        height: calc(100% + 10px);
        width: calc(100% + 10px);
        position: absolute;
        top: -5px;
        left: -5px;
    }

    .header {
        height: 30px;
        background-color: @dps-color-gray;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;

        .icon {
            height: 20px;
            width: 20px;
            margin-left: 9px;

            img {
                height: 100%;
                width: 100%;
            }
        }

        .title {
            font-size: @dps-font-size-base;
            color: @dps-color-white-70;
            line-height: 30px;
            margin-left: 9px;
        }

        .controller {
            position: absolute;
            top: 0;
            right: 0;

            .controller-btn {
                float: left;
                height: 30px;
                width: 30px;
                padding: 9px;
                box-sizing: border-box;
                font-size: 10px;
                color: @dps-color-white-70;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .controller-btn:hover {
                background-color: @dps-color-white-15;
            }

            .controller-btn:nth-of-type(3):hover {
                background-color: @dps-color-red-70;
            }
        }
    }

    .body {
        height: 600px;
        width: 800px;
        background-color: @dps-color-white;
        position: relative;

        .component {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        .iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .body-mask {
            width: 100%;
            height: 100%;
            background-color: @dps-color-black-0;
            position: absolute;
            top: 0;
            left: 0;
        }

        .iframe-mask {
            width: 100%;
            height: 100%;
            background-color: @dps-color-gray-50;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
                display: inline-block;
                font-size: 50px;
                animation: rotateKeyframes 1000ms linear infinite;
            }
        }
    }
}
</style>
